<template>
	<view class="album">
		<image :src="animationUrl" class="animationBg" v-if="isClick" @click="closeImg"></image>
		<view class="mask" v-if="isClick" @click="closeImg"></view>
		<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
			<image :src="item.url" class="scroll-view-item" v-for="(item, i) in bannerList" @click="blowUp(item)"></image>
		</scroll-view>
        <view class="goBack" @click="goBack">返回</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			bannerList: [],
			isClick: false,
			animationUrl: null
		}
	},
	onShow() {
		this.getBannerId()
	},
	methods: {
        goBack() {
            uni.navigateBack()
        },
		closeImg() {
			this.isClick = false
		},
		blowUp(item) {
			this.isClick = true
			this.animationUrl = item.url
		},
		scroll: function (e) {
			console.log(e)
		},

		getBannerId() {
			uni.request({
				url: this.configs.gameUrl + '/play/mResource/list',
				method: 'GET',
				header: {
					'X-Access-Token': this.configs.userToken // 在header中添加token
				},
				data: {
					pageSize: 200,
					type: 'album',
					userId: this.configs.userId
				},
				success: data => {
					console.log(data.data.result.records[0].id)
					this.getBannerList(data.data.result.records[0].id)
				},
				fail: (data, code) => { }
			});
		},
		getBannerList(id) {
			uni.request({
				url: this.configs.gameUrl + '/play/mFile/list',
				method: 'GET',
				header: {
					'X-Access-Token': this.configs.userToken // 在header中添加token
				},
				data: {
					resourceId: id,
					pageSize: 200,
					userId: this.configs.userId
				},
				success: data => {
					this.bannerList = data.data.result.records
					console.log(data.data.result.records, 222)
				},
				fail: (data, code) => { }
			});
		}
	}
}

</script>

<style scoped lang="less">
.album {
	//背景从上至下，从浅紫色变为白色
	background: linear-gradient(to bottom, #c3b8ff, #fff);
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
    .goBack {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        width: 100rpx;
        height: 24rpx;
        //粉色背景
        background: #F8879C;
        border-radius: 12rpx;
        text-align: center;
        line-height: 24rpx;
        color: #fff;
        font-size: 14rpx;
    }
	.mask {
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 5;
	}

	.animationBg {
		position: absolute;
		width: 640rpx;
		height: 360rpx;
		left: 50%;
		top: 50%;
		margin-left: -320rpx;
		margin-top: -180rpx;
		z-index: 10;
		//放大、同时变淡动画，只执行一次
		animation: scale 1s linear 0s 1 forwards;
	}

	@keyframes scale {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}
}

.scroll-view_H {
	white-space: nowrap;
	width: 100%;
}

.scroll-view-item {
	height: 180rpx;
	margin-right: 10rpx;
	display: inline-block;
}
</style>